<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script src="../JavaScript/js/tool.js"></script>
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding: 0;

        }
        #box1{
            height: 100px;
            width: 100px;
            background-color: red;
            position: absolute;
            left: 0;
        }
        #box2{
            height: 100px;
            width: 100px;
            background-color:yellow;
            position: absolute;
            left: 0;
            top:200px;
        }
    </style>
    <script>
        window.onload=function(){
            var box1=document.getElementById("box1");
            var btn01=document.getElementById("btn01");
            var btn02=document.getElementById('btn02');
            var btn03=document.getElementById("btn03");
            var btn04=document.getElementById("btn04");

            //点击按钮以后，使box1向右移动(left值增大)
            btn01.onclick=function(){
              move(box1,"left",800,20);
            }

            //点击按钮以后，使box1向左移动(left值减小)
            btn02.onclick=function(){
                move(box1,"left",0,10);
            };
            
            btn03.onclick=function(){
                move(box2,"top",800,10);
            };
            btn04.onclick=function(){
                // move(box2,"width",800,10);
                move(box2,"width",800,10,function(){
                    // alert("动画执行完毕了")
                    move(box2,"height",800,10);
                })

            };
        }

         //定义一个变量，用来博爱村定时器的标识
         var timer;
        //尝试创建一个可以简单执行的函数
        /* 
            参数：obj：要执行动画的对象
            target:执行动画的目标位置
            speed:移动的速度(正数向右移动，负数向左移动)
            attr:要执行动画的样式比如left.right,width,height
            callback:回调函数，这个函数将在函数执行后完成
        */
          
    </script>
</head>
<body>
    <button id="btn01">点击按钮以后box01向右移动</button>
    <button id="btn02">点击按钮以后box01向左移动</button>
    <button id="btn03">点击按钮以后box02向右移动</button>
    <button id="btn04">测试按钮</button>

    <br><br>
    <div id="box1"></div>
    <div id="box2"></div>
    <div style="width: 0; height: 1000px;border: 1px black solid;position: absolute;left:800px;top: 0;"></div>
    
</body>
</html>